<template>
   <div class="user-manage">
    <!-- 查询用户 -->
      <div class="query-form">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
             <el-form-item label="用户ID">
               <el-input v-model="formInline.userId" placeholder="用户ID" clearable />
             </el-form-item>
             <el-form-item label="用户名称">
               <el-input v-model="formInline.userId" placeholder="用户名" clearable />
             </el-form-item>
             <el-form-item label="用户状态" placeholder="用户名"  clearable>
               <el-select
                 v-model="formInline.state"
                 placeholder="用户状态"
                 clearable
               >
                 <el-option label="所有" :value="0" />
                 <el-option label="在职" :value="1" />
                 <el-option label="离职" :value="2" />
                 <el-option label="试用期" :value="3" />
               </el-select>
             </el-form-item>
             <!-- <el-form-item label="Activity time">
               <el-date-picker
                 v-model="formInline.date"
                 type="date"
                 placeholder="Pick a date"
                 clearable
               />
             </el-form-item> -->
             <el-form-item>
               <el-button type="primary" @click="onChaxun">查询</el-button>
             </el-form-item>
           </el-form>
      </div>
      <!-- 用户信息列表 -->
      <div class="base-table" >
          <div class="action">
            <el-button size="small" type="primary" @click="userFormVisible = true" >新增</el-button>
            <el-button size="small" type="danger">批量删除</el-button>
          </div>

          <el-table :data="tableData" style="width: 100%;height: calc(100vh - 215px);" >
          <el-table-column v-for="item in columns" 
              :key="item.label" 
              :label="item.label" 
              :prop="item.prop" 
              :formatter="item.formatter"
          />
          <el-table-column align="right" label="操作" width="140">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
       </div>

       <!-- 新增用户弹窗 -->
       <el-dialog v-model="userFormVisible" title="新增用户" width="400" center>
         <el-form  :model="addUserForm" class="demo-form-inline1">
           <el-form-item label="用户名" label-width="70px" >
             <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
           </el-form-item>
           <el-form-item label="用户密码">
             <el-input v-model="addUserForm.password" placeholder="请输入用户密码" clearable />
           </el-form-item>
           <el-form-item label="用户状态">
             <el-select
               v-model="addUserForm.state"
               placeholder="请选择用户状态"
               clearable
             >
               <el-option label="试用期" value="0" />
               <el-option label="在职" value="1" />
             </el-select>
           </el-form-item>
           <!-- <el-form-item>
             <el-button type="primary" @click="onSubmit">Query</el-button>
           </el-form-item> -->
         </el-form>
         <template #footer>
           <div class="dialog-footer">
             <el-button @click="quxiaoUserForm">取消</el-button>
             <el-button type="primary" @click="querenUserForm">
               确认
             </el-button>
           </div>
         </template>
       </el-dialog>

       <!-- 编辑用户弹窗 -->
       <el-dialog v-model="EdituserFormVisible" title="修改用户信息" width="400" center>
         <el-form  :model="EditUserForm" class="demo-form-inline1">
           <el-form-item label="用户名" label-width="70px" >
             <el-input v-model="EditUserForm.username" placeholder="请输入用户名" clearable />
           </el-form-item>
           <el-form-item label="用户密码">
             <el-input v-model="EditUserForm.password" placeholder="请输入用户密码" clearable />
           </el-form-item>
           <el-form-item label="用户状态">
             <el-select
               v-model="EditUserForm.state"
               placeholder="请选择用户状态"
               clearable
             >
               <el-option label="试用期" value="0" />
               <el-option label="在职" value="1" />
             </el-select>
           </el-form-item>
           <!-- <el-form-item>
             <el-button type="primary" @click="onSubmit">Query</el-button>
           </el-form-item> -->
         </el-form>
         <template #footer>
           <div class="dialog-footer">
             <el-button @click="quxiaoUserForm">取消</el-button>
             <el-button type="primary" @click="EditUserInfo">
               确认
             </el-button>
           </div>
         </template>
       </el-dialog>
   </div>
</template>
  
  <script setup>
  import { computed, onMounted, reactive, ref } from 'vue'
  import {getUser,addUser,deleteUser,updateUser} from "../../api/user"

  const EdituserFormVisible = ref(false)
  const userFormVisible = ref(false)

  const tableData = ref([])
  const formInline = ref({
    userId:'',
    userName:'',
    state:''
  })

  //新增用户表单内容
  const addUserForm = ref({
    username:"",
    password:"",
    state:"",
    createTime:""
  })
  // 添加用户表单内容
  const EditUserForm = ref()

  const columns = reactive([
    {label:"用户ID",prop:"id"},
    {label:"用户名",prop:"username"},
    {label:"用户邮箱",prop:"userEmail"},
    {label:"用户角色",prop:"role"},
    {
      label:"用户状态",
      prop:"state",
      formatter(row,column,value){
        return{
          0:"试用期",
          1:"在职",
          2:"离职"
        }[value]
      }
    },
    {label:"注册时间",prop:"createTime"},
    {label:"最后登录时间",prop:"lastLoginTime"},
  ])

  // 获取当前时间
  const dangqianTime = ()=>{
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth()+1).padStart(2,"0")
    const date = String(now.getDate()).padStart(2,"0")
    const hours = String(now.getHours()).padStart(2,"0")
    const minute = String(now.getMinutes()).padStart(2,"0")
    const second = String(now.getSeconds()).padStart(2,"0")
    // console.log(year)
    // console.log(year,month,date,hours,minute,second,'当前时间')
    const nowTime = `${year}-${month}-${date} ${hours}:${minute}:${second}`
    // console.log(nowTime,'当前时间')
    return nowTime
  }

  console.log(dangqianTime(),"当前时间")




  // 查询按钮
  const onChaxun = ()=>{
    console.log("开始查询")
  }
  
  const qGetUser = ()=>{
    getUser().then(res=>{
        console.log(res)
        tableData.value = res.data
    })
  }
  

  
  const search = ref('')
  const filterTableData = computed(() =>
    tableData.filter(
      (data) =>
        !search.value ||
        data.name.toLowerCase().includes(search.value.toLowerCase())
    )
  )
  const handleEdit = (index, row) => {
    EdituserFormVisible.value = true
    console.log(index, row,"编辑用户按钮")
    const {...data} = row
    console.log(data,"data")
    EditUserForm.value = data
    // console.log(EditUserForm)
  }
  const handleDelete = (index, row) => {
    console.log(index, row)
    deleteUser(row).then(res=>{
      console.log(res)
      qGetUser()
    }).catch(err=>{
      console.log(err)
    })
  }
// 确认修改用户信息
const EditUserInfo = ()=>{
  console.log(EditUserForm)
  const data = EditUserForm.value
  updateUser(EditUserForm.value).then(res=>{
    console.log(res)
    EdituserFormVisible.value = false
    qGetUser()

  }).catch(err=>{
    console.log(err)
  })
}

// 取消新增用户并清空表单
const quxiaoUserForm = ()=>{
  userFormVisible.value = false
}
//确认新增用户
const querenUserForm = ()=>{
  console.log(addUserForm.value)
  addUserForm.value.createTime = dangqianTime()
  const data = addUserForm.value
  console.log(data)
  addUser(data).then(res=>{
    console.log(res)
    qGetUser()
  }).catch(err=>{
    console.log(err)
  })
  userFormVisible.value = false
}


  onMounted(()=>{
    qGetUser()
  })

  </script>
<style lang="scss" scoped>

.query-form{
  background: #fff;
  border-radius: 5px;
  padding: 18px 20px 0;

}
.base-table{
  margin-top: 10px;
  padding: 10px;
  border-radius: 5px;
  background: #fff;
}
   .addButton{
    margin-bottom: 10px;
   }
   .el-table{
    // border-top: 1px solid #bcbcbc;
   }
   .demo-form-inline .el-input {
  --el-input-width: 190px;
}

.demo-form-inline .el-select {
  --el-select-width: 200px;
}
.action{
  border-radius: 5px 5px 0px 0px;
  padding: 5px 0px 10px 20px;
  border-bottom: 1px solid #ece8ee;
}

.demo-form-inline1{
  // padding-left: 40px;
  //margin-left: 50%;
  //transform: translateX(-50%);
  padding: 30px;
}

.demo-form-inline1 .el-input {
  --el-input-width: 220px;
}

.demo-form-inline1 .el-select {
  --el-select-width: 220px;
}
</style>